<template>
    <f7-page class="page-news-detail">
        <f7-navbar>
            <f7-nav-left sliding>
                <f7-link icon-fa="close" back></f7-link>
            </f7-nav-left>
            <f7-nav-center>新闻预览</f7-nav-center>
            <f7-nav-right>
                <f7-link icon-fa="arrow-right" href="/publish/newsType/"></f7-link>
            </f7-nav-right>
        </f7-navbar>
        <div class="main">
            <h2>刘强东：在智能商业时代，未来零售的图景是“无界”和“精准”</h2>
            <p class="author">作者：中国青年网</p>
            <div class="content">
                <p>第一段文本，简要说明一切问题，不能超过三分之一屏，保证图片在中部显示。不要太长啊，太长就分两段。</p>
                <img src="../../assets/images/test.jpg" alt="">
                <p>第一段文本，简要说明一切问题，不能超过三分之一屏，保证图片在中部显示。不要太长啊，太长就分两段。</p>
                <img src="../../assets/images/test.jpg" alt="">
                <p>第一段文本，简要说明一切问题，不能超过三分之一屏，保证图片在中部显示。不要太长啊，太长就分两段。</p>
                <img src="../../assets/images/test.jpg" alt="">
            </div>
        </div>
    </f7-page>
</template>

<style lang="scss">
    @import "../../assets/css/common.scss";
    .page-news-detail {
        .main {
            padding: 0 15px 10px;
        }

        h2 {
            margin: 10px 0 5px;
            text-align: justify;
        }

        .author {
            margin: 0;
            color: #999;
        }

        .content {
            color: #333;
            text-align: justify;

            img {
                width: 100%;
            }

            p {
                text-indent: 2em;
            }
        }
    }
</style>